<template>
  <div class="salesman">
    <div class="shouye">
      <div>{{ $t('menu.salesman') }}</div>
      <div>
        <el-select v-model="userName1" size="mini" @change="handelUser">
          <el-option
            v-for="iten in userList"
            :key="iten.fid"
            :label="iten.fuser"
            :value="iten.fuser"
          />
        </el-select>
      </div>
      <!--      <el-tag v-for="item in saleData" :key="item.name" @click="newlyOrder(item.path)">{{ item.name }}</el-tag>-->
    </div>
    <hr class="hr1">
    <ul class="header">
      <li :title="$t('market.unAuditCount')" @click="pushView(1)">
        <div class="firstHead">{{ $t('market.unAuditCount') }}</div>
        <div class="lastHead">{{ headerInfo.unAuditCount }}</div>
      </li>
      <li :title="$t('market.makingCount')" @click="pushView(0)">
        <div class="firstHead">{{ $t('market.makingCount') }}</div>
        <div class="lastHead">{{ headerInfo.makingCount }}</div>
      </li>
      <li :title="$t('market.readyOutCount')" @click="pushView">
        <div class="firstHead">{{ $t('market.readyOutCount') }}</div>
        <div class="lastHead">{{ headerInfo.readyOutCount }}</div>
      </li>
      <li :title="$t('market.outCount')" @click="pushView">
        <div class="firstHead">{{ $t('market.outCount') }}</div>
        <div class="lastHead">{{ headerInfo.outCount }}</div>
      </li>
      <li :title="$t('market.salerCommission')" @click="pushView">
        <div class="firstHead">{{ $t('market.salerCommission') }}</div>
        <div class="lastHead">{{ headerInfo.salerCommission.toFixed(0) }}</div>
      </li>
    </ul>
    <div class="shouye daohang">{{ $t('market.quickMenu') }}</div>
    <hr class="hr1">
    <div class="skipUrl">
      <el-button v-for="item in saleData" :key="item.name" type="success" plain @click="newlyOrder(item.path)">{{ item.name }}</el-button>
    </div>
    <div class="context">
      <div class="leftChart">
        <!--  销售排行榜 饼图  -->
        <pie />
      </div>
      <div class="rightList">
        <div class="rightListTop">
          <div>{{ $t('market.myOrderDetail') }}</div>
          <div>
            <el-button type="success" size="mini" round @click="newlyOrder('/createMarkerOrder')">{{ $t('btn.add') }}</el-button>
            <el-button type="primary" size="mini" round @click="newlyOrder('/marketOrder')">更多</el-button>
          </div>
        </div>
        <div>
          <jc-table
            :table-data="detailsData"
            :table-header="detailsHeader"
            table-height="400px"
          >
            <template v-slot:billSlot="clo">
              <el-link
                type="primary"
                @click="detailPurchase(clo.scope.row.fid)"
              >
                {{ clo.scope.row.fbillNo }}
              </el-link>
            </template>
          </jc-table>
        </div>
      </div>
    </div>
    <div class="fotter">
      <!--   折线图 近半年销售额   -->
      <lines class="line" :query-id="queryId" />
      <!--   柱形图 上年销售额   -->
      <bar class="bar" :query-id="queryId" />
    </div>
  </div>
</template>

<script>
import { queryTSalOrderDetailsList } from '@/api/marketManage/marketOrder'
import { querySalerHeader, queryUserstaList } from '@/api/homePageNew/salesman'
import { toMxAmina } from '@/components/ToMxamineState'
import { mapGetters } from 'vuex'
import pie from '@/views/homePageNew/salesman/component/pie'
import lines from '@/views/homePageNew/salesman/component/line'
import bar from '@/views/homePageNew/salesman/component/bar'
export default {
  name: 'Salesman',
  components: {
    pie,
    lines,
    bar
  },
  data() {
    return {
      headerInfo: {
        unAuditCount: 0,
        outCount: 0,
        salerCommission: 0,
        makingCount: 0,
        readyOutCount: 0
      },
      saleData: [
        { name: this.$t('menu.marketApply'), path: '/marketApplyList' },
        { name: this.$t('menu.marketManage'), path: '/marketOrder' },
        { name: this.$t('menu.salesPrice'), path: '/marketPriceList' },
        { name: this.$t('menu.customer'), path: '/customerList' },
        { name: this.$t('menu.deliveryRelease'), path: '/deliveryReleaseList' },
        { name: this.$t('menu.marketOutBank'), path: '/outBankList' }
      ],
      detailsData: [],
      detailsHeader: [
        { label: this.$t('market.order'), type: 'bill', width: '130' },
        { label: this.$t('market.date'), prop: 'fdate' },
        { label: this.$t('market.paezText1'), prop: 'fpaezText', minWidth: '100' },
        { label: this.$t('market.cust'), prop: 'customer', width: '100' },
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        {
          label: this.$t('market.fmaterial'),
          prop: 'fnumber',
          width: '130'
        },
        { label: this.$t('shop.fname2'), prop: 'fname', width: '120' },
        { label: this.$t('market.fqty'), prop: 'fqty', width: '80' },
        { label: this.$t('market.baseStockOutQty'), prop: 'fbaseStockOutQty', width: '80' },
        { label: this.$t('market.deliveryDate'), prop: 'fdeliveryDate' }
      ],
      userName1: '',
      queryId: '',
      userList: []
      // userName: '陈镜伊'
    }
  },
  computed: {
    ...mapGetters(['userName'])
  },
  created() {
    this.userName1 = this.userName
    this.detailsList() // 销售订单列表
    this.headerDetail() // 头部信息
    this.queryUsersta() // 销售员
  },
  methods: {
    // 销售员
    queryUsersta() {
      queryUserstaList({ stafftype: 1 }).then(res => {
        this.userList = res.data
      })
    },
    // 点击销售员
    handelUser(name) {
      this.userName1 = name
      this.userList.forEach(res => {
        if (res.fuser === name) {
          this.queryId = res.fuserid
        }
      })
      this.detailsList() // 销售订单列表
      this.headerDetail() // 头部信息
    },
    // 头部信息
    async headerDetail() {
      await querySalerHeader({ fsaler: this.userName1 || this.userName }).then(res => {
        this.headerInfo = res.data
      })
    },
    // 销售订单明细列表
    async detailsList() {
      const DATA = {
        pageNum: 1,
        pageSize: 200,
        fsaler: this.userName1 || this.userName,
        search: this.searCollData
      }
      const { data: RES } = await queryTSalOrderDetailsList(DATA)
      this.detailsData = RES.array.map(item => {
        return toMxAmina(item)
      })
    },
    // 订单详情
    detailPurchase(ev) {
      const id = ev.fid || ev
      this.$router.push({ path: `/marketRevising/${id}` })
    },
    // 跳转
    newlyOrder(path) {
      this.$router.push({ path: path })
    },
    // 待审核销售单
    pushView(ev) {
      this.$router.push({ path: '/marketOrder',
        query: {
          id: ev || '',
          fsaler: this.userName,
          fdocumentStatus: 'C'
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.salesman {
  padding: 10px;
  background: #FFFFFF;
  .shouye {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 550;
  }
  .hr1 {
    margin-bottom: 5px;
    border: 0;
    height: 1px;
    //background-image: linear-gradient(to right, #aa1d1d, #b3931d, #4aad1f, #1fa588, #1C3BAC, #971DA5, #aa1d1d);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 121, 248, 0.5), rgba(0, 0, 0, 0.1));
  }
  .daohang {
    font-size: 16px;
    font-weight: 550;
    color: #333;
    margin-top: 20px;
  }
  .header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    li {
      list-style: none;
      width: 12%;
      max-width: 300px;
      min-width: 200px;
      height: 70px;
      padding: 10px;
      background-color: rgb(64,158,255,0.1);
      border-radius: 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      .firstHead {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 16px;
        color: #FFF;
        background: #409EFF;
        padding: 5px 0;
        font-weight: 600;
        letter-spacing: 2px;
        height: 28px;
        overflow: hidden;
      }
      .lastHead {
        font-size: 28px;
        color: #666;
        line-height: 75px;
        font-weight: 600;
      }
    }
  }
  .context {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 400px;
    margin: 15px 0;
    .leftChart {
      width: 420px;
    }
    .rightList {
      width: calc(100 - 630px);
      .rightListTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
      }
    }
  }
  .skipUrl {
    margin: 10px 0;
    margin-left: 60px;
    padding: 0;
  }
  .fotter {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    .line, .bar {
      width: 50%;
    }
  }
}
</style>
